<template>
    <vxe-drawer v-model="systemRoleMenuComponentStore.isOpen"
                title="角色菜单配置"
                mask-closable
                esc-closable
                show-footer
                show-confirm-button
                :destroy-on-close="true"
                :width="600"
                :loading="systemRoleMenuComponentStore.isLoading">
        <!-- 表格 -->
        <vxe-table
            ref="tableRef"
            border
            stripe
            empty-text="暂无数据"
            :column-config="{resizable: true}"
            :row-config="{isHover: true}"
            :data="systemRoleMenuComponentStore.tableDataList">
            <vxe-column field="menuTitle" title="菜单名称"/>
            <vxe-column field="routeName" title="路由名称"/>
            <vxe-column field="isSelected" title="是否展示" width="80px">
                <template #default="{ row }">
                    <vxe-checkbox v-model="row.isSelected"></vxe-checkbox>
                </template>
            </vxe-column>
        </vxe-table>

        <!-- 底部区域 -->
        <template #footer>
            <vxe-button status="primary" @click="save">保存</vxe-button>
        </template>
    </vxe-drawer>
</template>

<script setup lang="ts">
import { useSystemRoleMenuComponentStore } from '@/store/UseSystemRoleMeunComponentStore.ts';
import { onMounted } from 'vue';
import { SystemRoleInfoVO } from '@/entiy/vo/SystemRoleInfoVO.ts';
import { DialogUtils } from "@/utils/DialogUtils.ts";

// 定义组件的属性
const props = defineProps<({
    systemRoleInfo: SystemRoleInfoVO,
})>();

// 状态管理 Store
const systemRoleMenuComponentStore = useSystemRoleMenuComponentStore();

// 保存按钮
const save = () => {
    systemRoleMenuComponentStore.isLoading = true;
    systemRoleMenuComponentStore.saveRoleMenuInfoList().then(() => {
        systemRoleMenuComponentStore.isOpen = false;
    }).catch(() => {
        systemRoleMenuComponentStore.isLoading = false;
        DialogUtils.showUniqueDialog("保存失败, 请稍后再试!")
    })
}

// 页面初始化
onMounted(() => {
    systemRoleMenuComponentStore.isLoading = true;
    systemRoleMenuComponentStore.loadTableData(props.systemRoleInfo)
        .finally(() => {
            systemRoleMenuComponentStore.isLoading = false;
        });
});
</script>